<template>
 <div>
 <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>我的信息</el-breadcrumb-item>
  <el-breadcrumb-item>修改密码</el-breadcrumb-item>
  </el-breadcrumb>
<!--放一个el-card-->
<el-card   style="width: 600px;height:250px;">
<!-- 声明表单-->
<el-form :model = PasswordForm :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="旧密码"  prop="oldpassword">
    <el-input v-model="PasswordForm.oldpassword"></el-input>
</el-form-item>
<el-form-item label="新密码"  prop="newpassword">
    <el-input v-model="PasswordForm.newpassword"></el-input>
</el-form-item>
<el-form-item>
    <el-button type="primary" style="float: right; " @click = "submitForm('ruleForm')" >提交</el-button>
   
</el-form-item>
</el-form>
</el-card>
 </div>
</template>

<script>
//对外暴露接口
 export default {
name:'changepassword', 
   data () {
     return {
         PasswordForm:{},
         rules: {
          oldpassword: [
            { required: true, message: '请输入字段', trigger: 'blur' },
            
          ],
          newpassword: [
            { required: true, message: '请输入字段', trigger: 'blur' },
            { min: 3, max: 100, message: '请输入至少3个字符', trigger: 'blur' }
          ],

          }

     }
   },
   components: {

   },
   methods: {
      submitForm(formName) {
          let that = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
              //向后端发ajax
         let that = this;
         let url = "api/ChangePasswordByToken";
         let data = {
             oldpassword:this.PasswordForm.oldpassword,
             newpassword:this.PasswordForm.newpassword,

         }
         this.$axios.post(url, this.$qs.stringify(data)).then(function(Response) {
        console.log(Response.data);
        let message = Response.data.message;
        let code = Response.data.code;
        let data = Response.data.data;
        if ((code == 200)) {
         that.$message.success(message);
         
        } else {
          that.$message.error(message);
        }
      });

            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
   },
 }
</script>

<style scoped>

 
</style>
